<template>
  <div class="image-upload">
    <el-upload
      class="avatar-uploader"
      :action="url"
      :headers="headers"
      :show-file-list="false"
      drag
      :data="requestData"
      :on-error="handleError"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      v-loading="loading"
    >
      <div class="img-box" slot="trigger" v-if="imageUrl">
        <img :src="imageUrl" class="avatar" />
        <i
          v-if="isClose"
          class="hover-class type-error el-icon-error"
          @click.stop="del"
        ></i>
       
      </div>
      <i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon"></i>
       <a
          v-if="imageUrl && isFileName"
          target="_blank"
          class="type-primary t-m-t-5"
          :href="imageUrl"
          >{{ imageUrl.split("/")[imageUrl.split("/").length - 1] }}</a
        >
    </el-upload>
  </div>
</template>


<script>
import {
    getToken,
    getTokenType,
    getMenucode
} from "@/utils/common"
export default {
  props: {
    value: {
      type: String,
    },
    url: {
      type: String,
      default: process.env.VUE_APP_UPLOAD_API + "/api/Server/UploadFile",
    },
    size: {
      type: Number,
      default: 200,
    },
    formatValue: {
      type: Array,
      default: () => {
        return ["png", "jpg", "jpeg", "gif"];
      },
    },
    id: {
      type: Number,
      default: 0,
    },
    isClose: {
      type: Boolean,
      default: false,
    },
    isFileName:{
      type:Boolean,
      default:true
    }
  },
  watch: {
    deep: true,
    id(v) {
      this.requestData.businessType = v;
    },
    value(v) {
      this.imageUrl = v;
    },
  },
  data() {
    return {
      loading: false,
      imageUrl: this.value,
      requestData: {
        fileName: "",
        businessType: "",
        businessId: 0,
      },
      headers:{
        Authorization: getTokenType() + ' ' + getToken(),
        'oa-original-menucode':getMenucode()
      }
    };
  },
  mounted() {
    this.requestData.businessType = this.id;
  },
  methods: {
    handleSuccess(res, file) {
      if (res.code === 0) {
        this.imageUrl = res.data.FileDownInfos[0].ThumbnailsUrl;
        this.$emit("success", res);
        this.$emit("input", this.imageUrl);
        this.$message.success("上传成功！");
      } else {
        this.$message.error("上传失败！");
      }
      this.loading = false;
    },
    beforeUpload(file) {
      this.requestData.fileName = file.name;
      this.requestData.businessId = file.uid;
      this.loading = true;
      let isLtExceed = file.size / 1024 / 1024 < this.size;
      let fileType = "";
      let name = file.name.split(".");
      fileType = name[name.length - 1];
      if (this.formatValue.join().indexOf(fileType) == -1) {
        this.$message.error(
          "请上传正确的图片(" + this.formatValue.join() + ")格式"
        );
        this.loading = false;
        return false;
      }
      if (!isLtExceed) {
        this.$message.error("上传图片大小不能超过" + this.size + "MB哦!");
        return false;
      }
      this.$emit('beforeUpload',file)
    },
    handleError() {
      this.$message.error("上传失败！");
      this.loading = false;
    },
    del() {
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.imageUrl = ""
        this.$emit("input", "");
        this.$emit('close')
        console.log('删除了')
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader{
  display: flex;
  flex-direction: column;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.el-upload-dragger {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.img-box {
  width: 178px;
  height: 178px;
  position: absolute;
  left: 0;
  top: 0;
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
  .el-icon-error {
    position: absolute;
    right: 5px;
    top: 5px;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    font-size: 20px;
  }
}
</style>